body {
  margin: 0;
  padding: 0;
  font-family: "Micorsoft YaHei", "微软雅黑";
  // background: #eee;
}

//background part
.bg-animation {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, #7540e8, #a0ece3);

  .square,
  .circle,
  .triangle {
    list-style: none;

    li{
     position: absolute;
     bottom: 0;
    }
    h3{
      background: #fff;
    }
  }

  .square {
    li {
      animation: square 6s linear infinite;
      opacity: 0;

      &:nth-child(1) {
        top: 40vh;
        left: 95vw;
        animation-delay: 0s;
        h3 {
          height: 45px;
          width: 45px;
        }
      }
      &:nth-child(2) {
        top: 20vh;
        left: 70vw;
        animation-delay: .5s;
        h3 {
          height: 55px;
          width: 55px;
        }
      }
      &:nth-child(3) {
        top: 10vh;
        left: 45vw;
        animation-delay: 1.5s;
        h3 {
          height: 60px;
          width: 60px;
        }
      }
      &:nth-child(4) {
        top: 2vh;
        left: 25vw;
        animation-delay: 2s;
        h3 {
          height: 40px;
          width: 40px;
        }
      }
      &:nth-child(5) {
        top: 40vh;
        left: 5vw;
        animation-delay: .5s;
        h3 {
          height: 50px;
          width: 50px;
        }
      }
    }
  }
  .circle {

    li {
      animation: circle 6s linear infinite;
      opacity: 0;
      h3 {
        border-radius: 50%;
      }
      &:nth-child(1) {
        top: 30vh;
        left: 80vw;
        animation-delay: 0s;
        h3{
          height: 40px;
          width: 40px;
        }
      }
      &:nth-child(2) {
        top: 0;
        left: 60vw;
        animation-delay: .6s;
        h3{
          height: 70px;
          width: 70px;
        }
      }
      &:nth-child(3) {
        top: 50vh;
        left: 35vw;
        animation-delay: 1.5s;
        h3{
          height: 50px;
          width: 50px;
        }
      }
      &:nth-child(4) {
        top: 65vh;
        left: 15vw;
        animation-delay: 2s;
        h3{
          height: 30px;
          width: 30px;
        }
      }
      &:nth-child(5) {
        top: 5vh;
        left: 1vw;
        animation-delay: 0s;
        h3{
          height: 55px;
          width: 55px;
        }
      }
   
    }
  }

  .triangle {

    li {
      animation: triangle 6s linear infinite;
      opacity: 0;
      div {
        width: 0;
        height: 0;
        border: 40px solid;
        border-color: transparent transparent #fff;
      }
      &:nth-child(1) {
        top: 55vh;
        left: 75vw;
        animation-delay: 0s;
        div{
          border: 30px solid;
          border-color:  transparent transparent #fff  ;
        }
      }
      &:nth-child(2) {
        top: 25vh;
        left: 50vw;
        animation-delay: .6s;
        div{
          border: 50px solid;
          border-color: transparent transparent #fff transparent;
        }
      }
      &:nth-child(3) {
        top: 60vh;
        left: 25vw;
        animation-delay: 1.5s;
        div{
          border: 25px solid;
          border-color: transparent transparent transparent #fff;
        }
      }
      &:nth-child(4) {
        top: 25vh;
        left: 17vw;
        animation-delay: 2s;
        div{
          border: 40px solid;
          border-color: #fff  transparent transparent transparent ;
        }
      }
      &:nth-child(5) {
        top: 18vh;
        left: 4vw;
        animation-delay: 0s;
        div{
          border: 35px solid;
          border-color: transparent  transparent #fff  ;
        }
      }
   
    }
  }
}
@keyframes square {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotateY(1000deg);
    opacity: 0;
  }
}


@keyframes circle {
  0% {
    transform: scale(0);
    opacity: 1;

  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    
  }
}
@keyframes triangle {
  0% {
    transform: scale(0);
    opacity: 1;

  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    
  }
}

//content part
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -180px;
  margin-left: -265px;
  width: 530px;
  height: 360px;
  // z-index: 1;
  .animation {
    &:before {
      content: "Animation";
    }
  }
  .layout {
    &:before {
      content: "Layout";
    }
  }
  .project {
    &:before {
      content: "Project";
    }
  }
}
.common{
  top: 50%;
  left: 50%;
  margin: 30px 0;
  padding: 0;
  display: flex;
  width: 530px;
  height: 80px;

  &:before {
    position: absolute;
    width: 530px;
    height: 80px;
    background: linear-gradient(45deg, #6e3ee8, #8dc2d7);
    border-radius: 40px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    font-size: 30px;
    transition: 0.5s;
    z-index: 1;
  }
  li {
    position: absolute;
    list-style: none;
    transition: 1s;

    a {
      display: block;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: #262626;
      color: #fff;
      margin: 0 10px;
      border-radius: 50%;
      font-size: 14px;
      transition: 1s;
      text-decoration: none;
    }

    &:nth-child(1) a {
      background: #21b41e;
    }
    &:nth-child(2) a {
      background: #55acee;
    }
    &:nth-child(3) a {
      background: #dd4b39;
    }
    &:nth-child(4) a {
      background: #0077b5;
    }
    &:nth-child(5) a {
      background: #d4bc24;
    }
  }
}
.ul-common {

  &:hover:before {
    width: 76px;
    height: 76px;
    line-height: 76px;
    font-size: 14px;
    font-weight: 900;
    color: #141414;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 -2px 2px rgba(0, 0, 0, 1),
      inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 0 0 6px #465497;
  }

  &:hover li:nth-child(1) a {
    transform: translateX(80px) rotate(360deg);
    transition-delay: 0.8s;
  }
  &:hover li:nth-child(2) a {
    transform: translateX(170px) rotate(360deg);
    transition-delay: 0.6s;
  }
  &:hover li:nth-child(3) a {
    transform: translateX(260px) rotate(360deg);
    transition-delay: 0.4s;
  }
  &:hover li:nth-child(4) a {
    transform: translateX(350px) rotate(360deg);
    transition-delay: 0.2s;
  }
  &:hover li:nth-child(5) a {
    transform: translateX(440px) rotate(360deg);
    transition-delay: 0s;
  }
}
